<template>
    <div>
        <div class="products">
            <div class="container">ProductList page</div>
            <template v-for="product in products">
                <product-item :key="product._id" :product="product"></product-item>
            </template>
        </div>
    </div>
</template>

<script>
import ProductButtonVue from '@/components/products/ProductButton.vue'
import ProductItemVue from '../../components/products/ProductItem.vue'
export default {
    name: 'product-list',
    created() {
        if (this.products.length === 0) {
            this.$store.dispatch('allProducts')
        }
    },
    computed: {
        products() {
            return this.$store.getters.allProducts
        }
    },
    methods: {
        addToCart(product) {
            this.$store.commit('ADD_TO_CART', {
                product
            })
        }
    },
    components: {
        'product-button': ProductButtonVue,
        'product-item': ProductItemVue
    }
}
</script>

<style>
.product {
    border-bottom: 1px solid black;
}

.product_image {
    width: 100px;
    height: 100px;
}
</style>
